<template>
    <div class="search-box">
        <!-- 搜索 -->
        <el-input
            v-model="keyword"
            class="pane-box-input"
            placeholder="搜索素材"
            type="text"
            :prefix-icon="Search"
            clearable
            @input="onInput"
            @clear="clear"></el-input>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, withDefaults } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { debounce } from '../../utils/index';

interface Props {
    /** 输入内容 */
    modelValue?: any;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: ''
});

const emit = defineEmits(['update:modelValue', 'submit']);

const keyword = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const clear = () => {};

const onInput = debounce(() => {
    emit('submit');
}, 500);
</script>
<style lang="scss" scoped>
.search-box {
    margin-bottom: 12px;
}
</style>
